<template>

  <div class="right">
    <el-tabs type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" code=""></el-tab-pane>
<!--      <el-tab-pane label="鄂城区" code="420704"></el-tab-pane>-->
<!--      <el-tab-pane label="华容区" code="420703"></el-tab-pane>-->
<!--      <el-tab-pane label="梁子湖区" code="420702"></el-tab-pane>-->
    </el-tabs>
    <div style="position: absolute;z-index: 9;width: 100%">
      <el-row style="width: 50%">
        <el-col :span="6">
          <el-card>
            <span class="number">{{taskInfo.maintTotal}}</span>
            <br/>
            计划保养数
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <span class="number">{{taskInfo.maintDone}}</span><br/>
            完成保养数
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card >
            <span class="number">{{taskInfo.userTotal}}</span><br/>
            计划人员数
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card >
            <span class="number">{{taskInfo.userDone}}</span><br/>
            出勤人数
          </el-card>
        </el-col>
      </el-row>

    </div>
        <baidu-map class="map" :center="mapCenter"  :zoom="mapZoom" :scroll-wheel-zoom="true" @ready="handlerBMap"/>
  </div>
</template>

<script>
import {getAdminMaintTaskEleList, getAdminMaintTaskInfo} from "@/api/adminhome";

export default {
  components: {

  },
  data () {

    return {
      mapZoom: 12,
      mapCenter: { lng: 111.33011638810164, lat: 30.71872667088478 },
      title: '',
      taskInfo:{},
      formLabelWidth: '120px',
      form: {
        address: undefined,
        regionLocation: undefined
      },
      tableData: []
    }
  },
  mounted () {
    this.gettableData('')
  },
  methods: {
    openInfo(item, p) {
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var infoWindow = new BMap.InfoWindow(this.content, this.opts); // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point); //开启信息窗口
    },
    handlerBMap ({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    },
    makerCenter (point,item) {
      if (this.map) {
        // this.map.clearOverlays()
        var mark=new this.BMap.Marker(point)
        this.map.addOverlay(mark)
        mark.addEventListener("click",r=>{
            this.content = `
           <div class="pop_container" ref="popContainer">
              <section>
                 <p><label>设备注册代码：</label><span>${item.eleCode}</span></p>
                 <p><label>设备类型：</label><span>${item.eleTypeName}</span></p>
                 <p><label>设备状态：</label><span>${item.eleStatus}</span></p>
                 <p><label>维保单位：</label><span>${item.maintOrgName}</span></p>
                 <p><label>使用单位：</label><span>${item.useOrgName}</span></p>
                 <p><label>电梯地址：</label><span>${item.eleUseCommunity}</span></p>
              </section>
          </div>
                        `;

            this.opts = {
              width: 400,
              height: 150,
              enableMessage: true
            };
          var p = mark.getPosition(); //获取marker的位置
          var marker1 = new BMap.Marker(new BMap.Point(p.lng, p.lat));
          this.openInfo(item, marker1);
        });
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 16
      }
    },
    handleClick(tab, event) {
      let code=tab.$attrs.code;
      this.gettableData(code)
    },
    // 获取表格数据
    gettableData (code) {
      const query = {eleAreaCode:code}
      getAdminMaintTaskInfo(query).then(res => {
        if (res.data.code == 200) {
          this.taskInfo = res.data.data
        }
      })
      getAdminMaintTaskEleList(query).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.map.clearOverlays()
          this.tableData.forEach(item=>{
            let lng = item.eleLocation.split(',')[0]
            let lat = item.eleLocation.split(',')[1]
            var point = new BMap.Point(lat,lng)
            // map.addOverlay(new this.BMap.Marker(point))
            this.makerCenter(point,item)
          });
        }
      })

    },
  }
}

</script>
<style lang="less" scoped>
.number {
  color: #32a0ee;
  font-size: 25px
}
.right {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: calc(100% - 50px);
    margin-top:-15px;
    ::v-deep .BMap_cpyCtrl {
      display: none !important;
    }

    ::v-deep .anchorBL {
      display: none !important;
    }
  }
}
</style>
